<template>
  <div :id="id" ref="boxwrap" :class="className" :style="{height:height,width:width}" :data="data" />
</template>

<script>
import resize from '@/components/Charts/mixins/resize'

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    id: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '200px'
    },
    height: {
      type: String,
      default: '200px'
    },
    data: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      chart: null,
      fontColor: '#bebebe',
      value: 75
    }
  },
  mounted() {
    this.domResize()
    this.initChart()
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      const angle = 0
      this.chart = this.$echarts.init(document.getElementById(this.id))
      this.chart.setOption({
        title: [{
          top: 10,
          left: 'center',
          text: '报警总次数',
          textStyle: {
            fontSize: 16,
            color: this.fontColor
          }
        }, {
          text: '{a|' + this.data + '}{c|次}',
          x: 'center',
          y: 'center',
          textStyle: {
            rich: {
              a: {
                fontSize: 34,
                color: '#29EEF3'
              },
              c: {
                fontSize: 14,
                color: '#ffffff'
                // padding: [5,0]
              }
            }
          }
        }],
        series: [{
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                startAngle: (0 + angle) * Math.PI / 180,
                endAngle: (90 + angle) * Math.PI / 180
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.85,
                startAngle: (180 + angle) * Math.PI / 180,
                endAngle: (270 + angle) * Math.PI / 180
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.92,
                startAngle: (270 + -angle) * Math.PI / 180,
                endAngle: (40 + -angle) * Math.PI / 180
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            return {
              type: 'arc',
              shape: {
                cx: api.getWidth() / 2,
                cy: api.getHeight() / 2,
                r: Math.min(api.getWidth(), api.getHeight()) / 2 * 0.92,
                startAngle: (90 + -angle) * Math.PI / 180,
                endAngle: (220 + -angle) * Math.PI / 180
              },
              style: {
                stroke: '#0CD3DB',
                fill: 'transparent',
                lineWidth: 1.5
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: 'ring5',
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            const x0 = api.getWidth() / 2
            const y0 = api.getHeight() / 2
            const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.92
            const point = this.getCirlPoint(x0, y0, r, (90 + -angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: '#0CD3DB', // 粉
                fill: '#0CD3DB'
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: 'ring5', // 绿点
          type: 'custom',
          coordinateSystem: 'none',
          renderItem: (params, api) => {
            const x0 = api.getWidth() / 2
            const y0 = api.getHeight() / 2
            const r = Math.min(api.getWidth(), api.getHeight()) / 2 * 0.92
            const point = this.getCirlPoint(x0, y0, r, (270 + -angle))
            return {
              type: 'circle',
              shape: {
                cx: point.x,
                cy: point.y,
                r: 4
              },
              style: {
                stroke: '#0CD3DB', // 绿
                fill: '#0CD3DB'
              },
              silent: true
            }
          },
          data: [0]
        }, {
          name: '主体圆环',
          type: 'pie',
          radius: ['80%', '60%'],
          silent: true,
          clockwise: true,
          startAngle: 90,
          z: 0,
          zlevel: 0,
          label: {
            position: 'center'
          },
          data: [{
            value: this.value,
            name: '',
            itemStyle: {
              color: { // 完成的圆环的颜色
                colorStops: [{
                  offset: 0,
                  color: '#4FADFD' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#28E8FA' // 100% 处的颜色
                }]
              }
            }
          },
          {
            value: 100 - this.value,
            name: '',
            label: {
              show: false
            },
            itemStyle: {
              ncolor: '#173164'
            }
          }
          ]
        },

        {
          name: '分割线',
          type: 'gauge',
          radius: '100%',
          center: ['50%', '50%'],
          startAngle: 0,
          endAngle: 359.9,
          splitNumber: 8,
          axisTick: {
            show: false
          },
          splitLine: {
            length: 100,
            lineStyle: {
              width: 3,
              color: '#061740'
            }
          },
          axisLabel: {
            show: false
          },
          pointer: {
            show: false
          },
          axisLine: {
            lineStyle: {
              opacity: 0
            }
          },
          detail: {
            show: false
          },
          data: [{
            value: 0,
            name: ''
          }]
        }

        ]
      })
    },
    // 获取圆上面某点的坐标(x0,y0表示坐标，r半径，angle角度)
    getCirlPoint(x0, y0, r, angle) {
      const x1 = x0 + r * Math.cos(angle * Math.PI / 180)
      const y1 = y0 + r * Math.sin(angle * Math.PI / 180)
      return {
        x: x1,
        y: y1
      }
    },
    domResize() {
      const that = this
      const dom = this.$refs.boxwrap
      this.$erd.listenTo(dom, function(element) {
        that.chart.resize()
      })
    }
  }
}
</script>
